<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#top_content{
				width: 100%;
				height: 200px;
				border: 1px solid transparent;
				text-align: center;
				line-height: 200px;
			}
			#sticky{
				width: 100%;
				height: 20px;
				background: black;
				color: white;
				text-align: center;
				margin: 10px 0;
			}
			#main_content{
				height: 6666px;
			}
			.ac{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				//JQ相关操作  思路：滚动下拉条，超过200px，吸顶灯定死在页面上
				//$(Window) 来监听窗口的事件：滚动、窗口视图大小
				//超过200px，，固定>滚动  吸顶灯通过添加样式操作，定死页面上
				//固定值：获取到达吸顶灯位置的偏移量
				//offset()获取或者设置元素相对于文档偏移量
				//#top  获取body顶部
				var so=$("#sticky").offset().top;
				//scroll()  监听页面的滚动事件
				$(window).scroll(function(){
					//超过：200px
					//②获取页面滚动的值：动态值
				var st=$(window).scrollTop();
					//超过：200px  动态值200>固定值200  条件满足：页面吸顶灯样式定死
				if(st>so){
					$("#sticky").addClass("ac");
				}else{
					$("#sticky").removeClass("ac");
				}
				});
			});
		</script>
	</head>
	<body>
		<div id="top_content">顶部内容区域</div>
		<div id="sticky">我是吸顶元素</div>
		<div id="main_content">
			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit architecto eaque eos, quia ullam nam officiis, nesciunt doloremque at odit eius labore dignissimos! Tempore nemo commodi velit ab porro fuga!
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi facilis quasi odit, cumque debitis necessitatibus obcaecati possimus dolorum autem, sequi amet voluptatem magnam vitae, esse ratione dignissimos illo quos non.Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate molestiae cum ex necessitatibus laborum, fugiat, commodi recusandae reiciendis rerum, nulla ad. Minima, ab vel possimus sit in dolores doloremque blanditiis!</div>
	</body>
</html>